<div class="card-style">
      <div class="ion-card-title">
        世界500强排名
      </div>
      <div class="southern-Grid-Rank grad">
        <ion-grid>
          <ion-row  class="row-style"> 
            <ion-col col-3>
              <img class="image" src="assets/imgs/shap.png" />
            </ion-col>
            <ion-col col-9>
              <ion-row class="row-style">
                <label class="rank-number">110</label>
                <Label class="name">名</Label>
                <div class="triangle"></div>
                <label class="rank-position">10位</label>
              </ion-row>
              <ion-row class="row-style">
                <label class="rank-name">2018年南方电网排名</label>
              </ion-row>
            </ion-col>
          </ion-row>

        </ion-grid>
      </div>
      <ion-list no-lines>
        <ion-item *ngFor="let item of ranks" class="listitem">
          <ion-grid class="grid-style">
            <ion-row  [style.backgroundColor]=item.background>
              <ion-col  col-3><label class="rank-number">第{{item.rank}}名</label></ion-col>
              <ion-col  col-6>
                <label class="rank-name">{{item.name}}</label>
              </ion-col>
              <ion-col class="col-style" col-2>
                  <div [ngClass]="{'triangle-down' : (item.trend),'triangle-up': (!item.trend) }"></div>
                  <label class="rank-position">{{item.position}}位</label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>
      <div>

      </div>
</div>